﻿<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ConferenceRoom.aspx.vb" Inherits="LokWebGame.ConferenceRoom" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>LOK - Conference Room</title>
    <link href="Styles/ConferenceRoom.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.signalR-1.0.1.min.js" type="text/javascript"></script>
    <script src="/signalr/hubs" type="text/javascript"></script>
    <script src="Scripts/Game/ConferenceRoom.js"></script>
    <script src="Scripts/getURLParam.js"></script>
    <script type="text/javascript">
        $(function () {
            // Proxy created on the fly          
            var chat = $.connection.chatHub;

            // Declare a function on the chat hub so the server can invoke it          
            chat.client.addMessage = function (message) {
                $('#ChatRoom').append('<li>' + message + '</li>');
                $("#ChatRoom").animate({ scrollTop: $("#ChatRoom")[0].scrollHeight }, 1000);
            };

            // Start the connection
            $.connection.hub.start().done(function () {
                $('#msg').bind('keypress', function (e) {
                    if (e.keyCode == 13) {
                        chat.server.sendMessage($(document).getUrlParam("ID"), $('#msg').val());
                        $('#msg').attr('value', '');
                        e.preventDefault();
                    }
                });
            });
        });

        window.onload = function () {
            ConferenceRoom.Start();
            $("#msg").focus();

            document.body.onmousedown = function () { ++mouseDown; }
            document.body.onmouseup = function () { --mouseDown; }
        };

        var mouseDown = 0;


</script>
</head>
<body ondragstart="return false;">

    <form id="form1" runat="server">
    <div>
        <canvas id="ConferenceCanvas" width="640" height="480" style="border:1px solid black;" ></canvas>
        <img id="btnPlay" src="Images/Buttons/playButtonUp.png" onmousedown="$('#btnPlay').attr('src', 'Images/Buttons/playButtonDown.png');" onmouseup="$('#btnPlay').attr('src', 'Images/Buttons/playButtonUp.png');" onmouseout="$('#btnPlay').attr('src', 'Images/Buttons/playButtonUp.png');" onmouseover=" if (mouseDown) { $('#btnPlay').attr('src', 'Images/Buttons/playButtonDown.png'); } else { $('#btnPlay').attr('src', 'Images/Buttons/playButtonUp.png');  }" onmousemove=" if (mouseDown) { $('#btnPlay').attr('src', 'Images/Buttons/playButtonDown.png'); } else { $('#btnPlay').attr('src', 'Images/Buttons/playButtonUp.png');  }" />
        <div id="ChatRoom" style="width:386px;height:459px;overflow:auto;"></div> <!-- Chat messages go here -->
        <input type="text" id="msg" placeholder="message here" style="width:636px;"  />

    </div>
    </form>
</body>
</html>
